<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
          <div class="sn-quick-menu">
            <div class="login"><img v-if="info.logo"
                   :src="info.logo.path"
                   alt="">{{info.name?info.name:'暂未设置'}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`"
                         title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action=""
                  class="layui-form"
                  novalidate>
              <input type="text"
                     v-model="keyword"
                     class="layui-input"
                     placeholder="搜索关键字">
              <button class="layui-btn"
                      @click="filterPops()">
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">

      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types"
                 style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/orderlist`">我的订单</router-link>
              <router-link :to="`/nowadderss`">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="commod-cont-wrap"
           style="background:#f8f8f8;">
        <div class="commod-cont w1200 layui-clear">
          <div class="order-top">订单详情</div>
          <div class="orderdeatil">
            <h4>收货人信息 </h4>
            <div class="consignee-scroll">
              <ul class="consignee-cont">
                <li class="ui-switchable-panel ui-switchable-panel-selected" style="display: list-item;">
                  <div class="consignee-item item-selected">
                    <span>{{orderdetail.name}}</span>
                  </div>
                  <div class="addr-detail">
                    <span class="addr-name">{{orderdetail.name}}</span>
                    <span class="addr-info">{{orderdetail.province}}{{orderdetail.city}}{{orderdetail.area}}{{orderdetail.address}}</span>
                    <span class="addr-tel">{{orderdetail.mobile}}</span>
                  </div>
                </li>
              </ul>
            </div>
            <h4>清单信息</h4>
            <div class="goods-list">     
              <div class="goods-tit">
                  <h4 class="vendor_name_h vendor_name_0"><i class="el-icon-s-shop"></i>{{orderdetail.store_name}}</h4>
              </div>
              <div class="goods-items" v-for="(items,index) in orderdetail.orderItems" :key="index">
                  <div class="goods-suit goods-last">
                    <div data-service=""></div>
                      <div class="goods-item goods-item-extra">
                  <div class="p-img">
                    <router-link :to="{path:'/shopdeatil',query: {product_id: items.product_id}}"><img :src="items.main_imgurl" alt=""></router-link> 
                  </div>
                  <div class="goods-msg">
                      <div class="goods-msg-gel">			
                        <div class="p-name">
                            {{items.product_title}}
                         </div>
                        <div class="p-price ">
                          <strong class="jd-price">￥ {{items.price}}<em class=""></em></strong>
                          <span class="" style="margin-left:20px">x{{items.num}}</span> 
                        </div>
                      </div>    
                  </div>
                  <!-- <div class="c_cpay_nums">
                    <div class="c_cnMinus el-icon-minus"></div>
                    <div class="c_cnpay_num">{{items.num}}</div>
                    <div class="c_cnAdd el-icon-plus"></div>
                  </div> -->
                          <div class="p-extra-continer">
                            <div class="p-extra-line">
                                  <div class="fr" v-for="(item2,index2) in items.attr_params" :key="index2"><span v-if="item2.attr_name">{{item2.attr_value}}</span><span v-if="item2.key">{{item2.value}}</span></div>
                            </div>
                          </div> 
                      </div>
                  </div>
              </div>
          </div>
          <h4>订单信息</h4>
          <div class="coms">
            <p>订单编号:<span class="txt">{{orderdetail.order_code}}<i v-clipboard:copy="orderdetail.order_code" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</i></span></p>
            <p>支付状态:<span>{{status[orderdetail.order_status]}}</span></p>
            <p>配送方式:<span v-if="orderdetail.move_way == 1">快递</span><span v-else></span></p>
            <p>下单时间:<span>{{orderdetail.create_time | formatDates}}</span></p>
          </div>
          <!-- 价格 -->
          <div class="order-summary">
            <div class="statistic">
                <div class="list">
                          <span>总商品金额：</span>
                          <em class="price">￥{{orderdetail.price}}</em>
                </div>
                <div class="list">
                        <span>运费：</span>
                        <em class="price"><font color="#000000"> ￥0.00</font></em>
                </div>

            </div>
          </div>
          <!-- 总额 -->
          <div class="trade-foot">
             <div class="trade-foot-detail-com">
               <div class="fc-price-info" v-if="orderdetail.order_is_many_way == 1">
                        <span class="price-tit">应付定金：</span>
                        <span class="price-num" id="sumPayPriceId" v-if="orderdetail.order_deposit_money">￥{{orderdetail.order_deposit_money || '0.00'}}</span>
                </div>
                <div class="fc-price-info">
                        <span class="price-tit">应付总额：</span>
                        <span class="price-num" id="sumPayPriceId">￥{{orderdetail.price || '0.00'}}</span>
                </div>
                <div class="fc-consignee-info" v-if="orderdetail">
                    <span class="mr20" id="sendAddr">寄送至：{{orderdetail.province}} {{orderdetail.city}} {{orderdetail.area}} {{orderdetail.address}}</span>
                    <span id="sendMobile">收货人：{{orderdetail.name}} {{orderdetail.mobile}}</span>
                </div>
             </div>
          </div>
          <!-- 提交 -->
          <div class="checkout-buttons" v-if="orderdetail.order_status == 1">
             <el-button class="checkout-submit" type="danger" @click="getpayorder()">立即支付</el-button>
             <el-button class="checkout-submit2" type="danger" @click="cancelOrder()">取消订单</el-button>
             <el-button class="checkout-submit2" type="danger" @click="daochuOrder()">导出清单</el-button>
          </div>
          <div class="checkout-buttons" v-if="orderdetail.order_status == 2">
             <el-button class="checkout-submit" type="danger" v-if="orderdetail.is_many_way == 1 &&orderdetail.balance_status == 0" @click="getpayorder()">支付尾款</el-button>
             <el-button class="checkout-submit2" type="danger" @click="daochuOrder()">导出清单</el-button>
          </div>
          <div class="checkout-buttons" v-if="orderdetail.order_status == 3">
             <el-button class="checkout-submit" type="danger" v-if="orderdetail.is_many_way == 1 &&orderdetail.balance_status == 0" @click="getpayorder()">支付尾款</el-button>
             <el-button class="checkout-submit" type="danger" v-if="orderdetail.arrive_status == 0" @click="getaddorder()">确认收货</el-button>
             <el-button class="checkout-submit2" type="danger" @click="daochuOrder()">导出清单</el-button>
          </div>
          <div class="checkout-buttons" v-if="orderdetail.order_status == 4">
             <el-button class="checkout-submit2" type="danger" @click="daochuOrder()">导出清单</el-button>
          </div>
          <div class="checkout-buttons" v-if="orderdetail.order_status == 5">
             <el-button class="checkout-submit2" type="danger" @click="daochuOrder()">导出清单</el-button>
          </div>
          
          </div>
          
        </div>
      </div>
    </div>
    <el-dialog
      title="订单支付"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose">
      <div class="ep-order">
         <div class="ep-order-tit"> <dl><dt>商品订单：</dt> <dd>{{order_code}}</dd> </dl> </div>
         <div class="ep-order-tit"> <span v-if="orderdetail.order_is_many_way == 1">支付金额：<em class="rmb"><i>¥</i>{{orderdetail.order_deposit_money || '0.00'}}</em></span><span v-else>支付金额：<em class="rmb"><i>¥</i>{{orderdetail.price || '0.00'}}</em></span></div>
          <div class="paybox" style="margin-top:15px;">
            <div class="left-box" @click="radioChange(1)" :class="{active:tapIndex==1}"><div class="weixin"></div>微信支付</div>
            <div class="left-box" @click="radioChange(2)" :class="{active:tapIndex==2}"><div class="xianxia"></div>线下支付</div>
          </div>
          <div class="ep-pay-method">
              <dl> 
                <!-- <dt v-if="tapIndex == 1">支付方式：微信支付</dt>
                <dt v-else>支付方式：线下支付</dt> -->
                <dd class="pay-channel ">
                  <div v-if="tapIndex == 1"><img style="width:200px;height:200px" :src="code_url" /></div>
                  <qriously v-else :value="initQCode" :size="180" style="padding:20px;"/>  
                  <div v-if="tapIndex == 1" class="ep-wxpay-qrcode-notice">请打开手机微信，扫一扫完成支付</div>
                  <div v-else class="ep-wxpay-qrcode-notice">请扫一扫进行核销</div>    
                </dd>
              </dl>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="gitdialog()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="确认收货"
      :visible.sync="dialogVshow"
      width="60%"
      :before-close="handleCloses">
      <div class="ep-order">
         <section class="shopcartContainer">
                <div class="shopcartContainerMain">
                  <table class="cont1 mobile_hidden" tyle="width:100%;"><!--PC端购物车-->
                    <tr class="title_tr">
                      <th style="width: 100px;"><span class="c_sSelect" :class="{'active': isAllSelect}" @click="selectAll"></span>全选</td>
                      <th style="width: 60px;"></th>
                      <th style="width: 310px;">商品</th>
                      <th style="width: 130px;">规格</th>
                      <th style="width: 130px;">单价</th>
                      <th style="width: 160px;">数量</th>
                    </tr>
                    <tr class="br"><td colspan="8"><!--分割线--></td></tr>
                    <template v-for="(items,index) in cart">
                    <tr class="merchant"><td colspan="8"><span style="margin-top: 2px;margin-right:5px;float:left;" class="c_cSelect" :class="{'active': items.select}" @click="selectShop(items.courier_num)"></span>快递:{{items.express_name}}  订单号:{{items.courier_num}}</td></tr>
                    <tr v-for="(item,index) in items.list" :key="index">
                      <td><span class="c_cSelect" :class="{'active': item.select}" @click="selectGoods(items.courier_num, item.id)"></span></td>
                      <td><img :src="item.main_imgurl" class="shopImg"/></td>
                      <td>
                        <router-link class="shopName" :to="{path:'/shopdeatil',query: {product_id: item.product_id}}">{{item.product_title}}</router-link>
                      </td>
                      <td><p v-for="(item2,index2) in item.attribute" :key="index2">{{item2.value}}</p></td>
                      <td><p class="cost_price">底价:￥<span>{{item.cost_price}}</span></p><p class="s_price">售价:￥<span>{{item.price}}</span></p><p class="s_price">原价:￥<span>{{item.primary_price}}</span></p></td>
                      <td>
                        x{{item.num}}
                      </td>
                    </tr>
                    <tr class="br"><td colspan="8"><!--分割线--></td></tr>
                    </template>
                  </table>
                </div>   
            </section>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toCartList()">确 定</el-button>
      </span>
    </el-dialog>


    <div class="footer">
      <div class="ng-promise-box">
        <div class="ng-promise w1200">
          <p class="text">
            <a class="icon1"
               href="javascript:;">7天无理由退换货</a>
            <a class="icon2"
               href="javascript:;">送货上门</a>
            <a class="icon3"
               style="margin-right: 0"
               href="javascript:;">100%品质保证</a>
          </p>
        </div>
      </div>
      <div class="mod_help w1200">
        <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
        <p class="coty">融易装版权所有 &copy; 2012-2020</p>
      </div>
    </div>

  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {
        name: '小刀',
        info: {},
        paramsdata:{},
        skuList:[],
				infos:"",
        totalPrice:'',
				Nocart :'',
				origin_type:'',
        form: {
           name:"",
           mobile:'',
           address:'',
           is_default:0,
        },
        province:[],
        city:[],
        district:[],
        provinceObj:{},
        cityObj:{},
        districtObj:{},
        mobile: '',
        activeName: '1',
        keyword: '',
        dialogVisible: false,
        dialogadders:false,
        dialogVshow:false,
        addressDatas:{
					loading:false,
					fail:false,
					list:[],
					index:0
				},
        tapIndex:1,
        addtit:'新增收货地址',
        addshowlist:false,
        code_url:'',
        code:'',
        initQCode: '',
        order_code :'',
        orderdetail:'',
        status: {
					1: "待付款",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已关闭"
        },
        cart: [],
				isAllSelect: false, // 是否全选中
				sumPrice: 0,
				sumCostPrice: 0,
        keyword:'',
      }
    },
    mounted() {
      this.info = JSON.parse(localStorage.getItem('info'))
      this.mobile = localStorage.getItem('mobile')
      this.paramsdata = JSON.parse(localStorage.getItem('params'))
      this.order_code = this.$route.query.orderid
      this.getUserorder()
    },
    filters: {
			formatDates(value) {
				  let date = new Date(parseInt(value) * 1000);
				  let y = date.getFullYear();
				  let m = date.getMonth() + 1;
				  m = m < 10 ? "0" + m : m;
				  let d = date.getDate();
				  d = d < 10 ? "0" + d : d;
				  let h = date.getHours();
				  h = h < 10 ? "0" + h : h;
				  let minute = date.getMinutes();
				  let second = date.getSeconds();
				  minute = minute < 10 ? "0" + minute : minute;
				  second = second < 10 ? "0" + second : second;
				  return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
			},
				formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y +"-" + m + "-" + d;
			}
    },
    computed: {
			totalLength() {
				if (this.cart && this.cart.length > 0) {
					let total = 0;
					this.cart.map(item1 => {
						if (item1.list && item1.list.length > 0) {
							total += item1.list.length
						}
					})
					return total
				} else {
					return 0
				}
			}
		},
    methods: {
      // 生成二维码
      gitaddshowlist(){
          this.addshowlist = !this.addshowlist
      },
      filterPops(){
        this.$router.push({name:'nowlist',query:{keyword:this.keyword}})
      },
      // 选择地址
      gitchoseadd(id){
          this.addressDatas.index =  this.addressDatas.list.findIndex(r=>r.id==id)
          this.addshowlist = false
      },
      gitadderss(){
          this.dialogadders = true
      },
      todeatil(product_id) {
        this.$router.push({ name: 'shopdeatil', query: { product_id: product_id } })
      },
      radioChange(t) {
				if(t == 1){
          this.tapIndex = 1
          this.getpayorder()
				}else{
          this.tapIndex = 2
          this.getpayorder()
				}
      }, 
      gitdialog(){
        this.dialogVisible = false
        this.$router.push({ name: 'orderlist', query: {} })
      } ,
      handleClose(){
         this.dialogVisible = false
        this.$router.push({ name: 'orderlist', query: {} })
    }, 
      // 订单
     getUserorder() {
        this.$http.post('/api/admin/shopweb/order/detail', { order_code:this.order_code}).then(res => {
          if (res.code == 1) {
            this.orderdetail = res.data
          }
        })
      },
      getaddorder(){
         this.dialogVshow= true
         this.getCartList()
      },
      //获取收货商品列表
			getCartList() {
        this.$http.post('/api/admin/shopweb/order/waitFor', { order_id: this.order_code}).then(res => {
          if (res.code == 1) {
            	this.cart = res.data.order_detail
							this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
          }
        })
      },
      // 选择订单
			selectShop(courier_num) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				// 全选or全不选
				shop.select = !shop.select
				shop.list.forEach(val => val.select = shop.select)
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 选择商品
			selectGoods(courier_num, id) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				let goods = shop.list.find(v => v.id == id)
				// 选中or不选中
				goods.select = !goods.select
				// 判断该订单下商品是否已全选
				let flag = true
				shop.list.forEach(val => {
					if (!val.select) flag = false
				})
				if (shop.select != flag) shop.select = flag
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 全选or全不选
			selectAll() {
				this.isAllSelect = !this.isAllSelect
				this.cart.forEach(val => {
					val.select = this.isAllSelect
					val.list.forEach(v => v.select = this.isAllSelect)
				})
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 验证所有商品是否全选
			verifyAllSelect() {
				let isAll = this.cart.find(val => !val.select) ? false : true
				if (this.isAllSelect != isAll) this.isAllSelect = isAll
      },
      //去收货
			toCartList() {
				let that = this
				let ary = []
				this.cart.forEach(val => {
					val.list.forEach(v => {
						if (v.select) {
							ary.push(
								v.id
							)
						}
					})
				})
        this.$confirm('是否确认收货？ 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.post('/api/admin/shopweb/order/sign', { 
             id_lst: ary.join(),
								order_id: this.order_code,
         }).then(res => {
          if(res.code == 1){
            this.dialogVshow = false
            this.getUserorder()
						this.$message({
            type: 'success',
            message: '取消成功!'
          });
					}
        })   
        }).catch(() => {
                    
        });
			},
      // 计算价格
			// countPrice() {
			// 	let price = 0, costPrice = 0
			// 	this.cart.forEach(val => {
			// 		val.list.forEach(v => {
			// 			if (v.select) {
			// 				price = this.accAdd(price, this.accMul(v.num, v.price))
			// 				costPrice = this.accAdd(costPrice, this.accMul(v.num, v.primary_price))
			// 			}
			// 		})
			// 	})
				
			// 	this.sumPrice = price
			// 	this.sumCostPrice = costPrice
			// },
      // 取消订单
      cancelOrder() {
        this.$confirm('此操作将取消订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.post('/api/admin/shopweb/order/cancel', { 
             order_code:this.order_code,
         }).then(res => {
          if(res.code == 1){
            this.getUserorder()
						this.$message({
            type: 'success',
            message: '取消成功!'
          });
					}
        })   
        }).catch(() => {
                    
        });
      },
      // 导出清单
      daochuOrder() {
        const user_id = localStorage.getItem('user_id')?localStorage.getItem("user_id"):"";
        this.$confirm('此操作将导出该订单清单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open('/api/admin/shopweb/order/export?order_code='+ this.order_code + '&user_id=' + user_id)  
        }).catch(() => {
                    
        });
      },
    // 复制
   　onCopy(e){ 　　 // 复制成功
　　　　this.$message({
　　　　　　message:'复制成功！',
　　　　　　type:'success'
　　　　})
　　},
　　onError(e){　　 // 复制失败
　　　　this.$message({
　　　　　　message:'复制失败！',
　　　　　　type:'error'
　　　　})
　　},
    // 订单支付
    getpayorder(){
            this.$http.post('/api/admin/shopweb/order/pay', { 
              order_no:this.order_code,
              type:'purchase_order',
              pay_type:this.tapIndex
            }).then(res => {
              if(res.code == 1){
						   let data = res.data
					       if(this.tapIndex == 1){
                     this.dialogVisible = true
                     this.code_url = res.data
                 }else{
                    this.code = res.data.verificationCode
                    this.initQCode = res.data.verificationCode
                    this.dialogVisible = true
                } 
              }else{
                this.$message.warning(res.msg)
              }
            })
    },
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content {
    padding: 0 !important;
  }
  @import "../css/index.less";
</style>
